前端学习圈

html-15 css预处理器

CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。

使用CSS预处理器语言,可以让你的CSS更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。

目前CSS 预处理器技术已经非常的成熟，而且也涌现出了很多种不同的CSS 预处理器语言，其中比较优秀的有LESS、Sass（SCSS）等等

Less 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件,只有在被编译后才能够被浏览器识别使用。预处理编译工具koala

一、SCSS

定义变量 

$color: #f00;   // 在scss中使用$符定义变量
.txt{
    color: $color;
}

&引用自身

对于BEM规范可以直接引用

.test{
    &__name{}  //相当于.test__name
}

@mixin混合器

复用代码

使用@mixin定义，使用@include使用；

// 普通使用
@mixin danger{
    font-size: 10px;
    color: #eee;
}
.notice{
    @include danger
}

// 传参使用
@mixin danger($col:#e22){
    color: $col;
}
.notice{
    @include danger(#d33)
}

// 多个参数时
@mixin colors($text, $background, $border) {
 color: $text;
 background-color: $background;
 border-color: $border;
}
$values: #ff0000, #00ff00, #0000ff;
.primary {
 @include colors($values...);
}
// 编译
.primary {
 color: #ff0000;
 background-color: #00ff00;
 border-color: #0000ff;
}

// 参数使用...全部使用，
@mixin box-shadow($shadows...) {
 -moz-box-shadow: $shadows;
 -webkit-box-shadow: $shadows;
 box-shadow: $shadows;
}
.shadows {
 @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}
// 编译
.shadowed {
 -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
 -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
 box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}

选择器继承

对于mixin使用的，会在每个使用了mixin的css里面都添加对应的样式，对于@extend继承的，则是将需要继承的类添加到一起，成为群组选择器

占位符输出不会包含定义的类；

// 直接使用
.note{
    font-size: 12px;
}
.danger{
    @extend .note;
}
// 输出：.note, .danger{}

// 占位符
%note{
    font-size: 12px;
};
.danger{
    @extend %note
};
// 输出：.danger {}

插值语句：#{} 

$name: foo;
$attr: border;
p.#{$name}{
    #{$attr}-color: blue;
}
// 编译
p.foo{
    #{$attr}-color: blue;
}

控制语句

@if()，只能使用==； 

p {
 @if 1 + 1 == 2 { border: 1px solid; }
 @if 5 < 3 { border: 2px dotted; }
 @if null  { border: 3px double; }
}
// 编译
p {
    border: 1px solid ;
}
// @else
$type: monster;
p {
    @if $type == ocean {

   } @else if $type == matador {

   } @else {}
}

@for

格式：@for $var from <start> through <end>

或：@for $var from <start> to <end>

使用through和to的区别： * through包含start和end的值 * to只包含start的值，不包含end的值，to比through少执行一次；

@for $i from 1 through 3 {
    .item-#{$i} {width: 2em * $i}
}

@each

格式：$var in <list>

@each $animal in puma,sea-slug,egret {
    .#{$animal}-icon {
       background-image: url('/images/#{animal}.png')
   }
}

// 编译
.puma-icon {
 background-image: url('/images/puma.png'); }
.sea-slug-icon {
 background-image: url('/images/sea-slug.png'); }
.egret-icon {
 background-image: url('/images/egret.png'); }
.salamander-icon {
 background-image: url('/images/salamander.png'); }
// 当多个变量数组时
@each $animal, $color, $cursor in (puma, black, default),
                                 (sea-slug, blue, pointer),
                                 (egret, white, move) {
 .#{$animal}-icon {
   background-image: url('/images/#{$animal}.png');
   border: 2px solid $color;
   cursor: $cursor;
 }
}
// 编译
.puma-icon {
 background-image: url('/images/puma.png');
 border: 2px solid black;
 cursor: default; }
.sea-slug-icon {
 background-image: url('/images/sea-slug.png');
 border: 2px solid blue;
 cursor: pointer; }
.egret-icon {
 background-image: url('/images/egret.png');
 border: 2px solid white;
 cursor: move; }
// 多重赋值时
@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
 #{$header} {
   font-size: $size;
 }
}
// 编译
h1 {
 font-size: 2em; }
h2 {
 font-size: 1.5em; }
h3 {
 font-size: 1.2em; }

示例：间隔类名

@each $name,$prop in (p:padding,pt:padding-top,pr:padding-right,pb:padding-bottom,pl:padding-left){
 @for $i from 0 through 30 {
    .#{$name}#{$i}{
     #{$prop}: #{$i}px;
   }
 }
}
// 编译(可以去https://www.sassmeister.com/查看)
p{padding: 1px;}

@while 

$i: 6;
@while $i > 0 {
    .item-#{$i} { width: 2em * $i; }
    $i: $i - 2;
}

常用工具函数 

$base_width: 750; // 设计稿宽度
$actual-max-width: 600; // 实际最大宽度

/* 根据设计稿中提供的宽度，计算出需要的 vw */
@function px2vw($px) {
  @return #{($px/$base_width) * 100}vw;
}

/* 由于限制了最大宽度，所以在采用vw布局时，需要限制最大高度 */
@function getMaxHeight($px) {
  @return #{($actual-max-width/$base_width) * $px}px;
}

二、less

注释

less有两中注释风格：

  • 标准的注释风格：/**/，会保留到编译后的文件。

  • 单行注释：// 不会保留到编译后的文件。

  1. koala有两种编译方式：

    normal 按照完整格式编译

    compress 压缩编译模式，多余的不显示。

import 导入样式

引入样式有两种方式：

  • 引入css文件：@import "css文件路径"，空格和后缀名不能省略。

  • 直接引入less文件：@import "style"，引入less文件可以省略扩展名。

编译后倒入的文件会和当前文件内容合并。

变量定义

变量以@开头，变量名与变量值之间用冒号隔开，

好处是更换风格方便。直接修改变量名的值就可以了。

使用变量直接@变量名，修改变量名可以直接修改被使用的属性值，编译之后直接是16进制的文件。

  • 变量可以使用字符串，使用时必须在@之后加{};

    @side : left; border-@{side}: 5px solid black;

  • 变量可以使用图片路径,使用路径时需要添加引号。

    @images: "../img"; background: url("@{images}/white-sand.png");

嵌套使用

选择器的嵌套：

可以在父元素选择器里面直接写子元素选择器嵌套使用，编译后的css文件会按照标准格式显示出来。

在嵌套的代码块内，可以使用&引用父元素，

选择器里面还可以嵌套自己本身，用&引用自己。

混入

混入在一个class中引入另一个定义好的class，直接增加另外一个class的属性。

定义一些通用的属性为一个class，使用的时候直接.class名;。

.bordered {    
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
}

调用：

a{
   color: #111;
   .bordered;
}

编译后会自动给a标签加入上面定义的属性。

混入参数 

.bordeRadius (@radius:20px) {
     -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
     -o-border-radius:@radius;
     -ms-border-radius:@radius;
     border-radius: @radius; 
}

//前面是类名，括号里面是变量值，用来传值的; //调用时直接使用调用类名的方式，如果有给类名设置默认值， //直接就是默认值的值，需要修改里面的值可以直接括号写值。 //编译后直接加入类名里面的代码

@arguments变量

代表所有参数。

.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
    -moz-box-shadow: @arguments;
    -webkit-box-shadow: @arguments;
    box-shadow: @arguments;
}

//前面写类名，括号里面写用到的值,前面加@属性名，多个用逗号隔开。 //如果需要写默认值，需要用冒号隔开。

.box{
 .box-shadow(2px, 5px); 
} 
编译后： 
.box {
 -moz-box-shadow: 2px 5px 1px #000000;
 -webkit-box-shadow: 2px 5px 1px #000000;
 box-shadow: 2px 5px 1px #000000; 
}

extend

extend伪类来实现样式的继承使用

直接写类名，会将类名里面所有的属性加入选择器里面的属性。

写了extend伪类之后，编译之后会将该组合选择类名的组加入到一起，其他单独元素另起一个类名写。

好处是少了很多行代码。

运算

LESS支持一些算术运算，例如加号(+)，减号( - )，乘法(*)和除法(/)的操作 只需写好表达式，编译时会计算结果; less会为你自动推断数值的单位，所以不必每一个值都加上单位 注意：涉及优先级时以()进行优先级运算

函数

转换颜色、处理字符串合进行算术运算的函数。

颜色：lighten() 减淡，darken()加深

.bg_light {
   height: 100px;
   background: lighten(rgb(255, 0, 0), 20%);
}
.bg_darken {   
    height: 100px;
   background: darken(blue, 20%)
}

percentage 将浮点数转换为百分比字符串。 参数：number- 一个浮点数。 返回： string (字符串) 代码示例

.main{
    width:percentage(100px/200px);
};
编译为css:
.main {
    width: 50%;
};

循环 

.loop(@n, @i: 1) when (@i < @n){
  .demo-@{i}{
    background: red;
  }
  .loop(@n, (@i+1));
}
.loop(100);

三、Stylus

Stylus是一个CSS预处理器。富于表现力、动态的、健壮的 CSS

安装

npm install stylus –save

npm install stylus-loader --save

特点

冒号可有可无 分号可有可无 逗号可有可无 括号可有可无

全靠空格和缩进来区分

使用变量

$不是必须的，但加上可以很醒目的知道它是个变量

$font-size = 14px

body
   font font-size Arial, sans-seri

使用函数 

fontS(){
   font-size 30px
   font-style normal
   color #00ff00
   font-weight 400
}

h1
   fontS()
   background $bgColor;

使用选择器 

textarea
input
   color #A7A7A7
   &:hover
       color #000
   等同于：textarea,input

使用插值 

vendor(prop, args)
   -webkit-{prop} args
   -moz-{prop} args
   {prop} args

border-radius()
   vendor('border-radius', 50%)
box-shadow()
   vendor('box-shadow', 5px 5px red)

条件判断 

box(x,y,margin-only=false)
if margin-only
    margin x y
else
    padding x y
p
box(5px,10px,true)

导入文件

推荐方案

公共的样式文件如reset.css使用JS方式导入在App.vue中,所有组件共享！

公共的.styl文件通过@import “xx.styl” 添加到需要的Vue文件中单独使用!

穿透

仅支持stylus使用；

当遇到无法修改的样式时，使用>>>进行穿透；

.btn >>> .swiper-tab-tem{}；优先级是最高的，比important还高；

父元素下的子元素颜色无法修改时使用；